<template>
	<div class="forget-container">
		<div class="forget-content">
			<el-card shadow="hover" header="">
				<div class="forget-title">密码找回</div>
				<el-steps :active="stepsActive">
					<el-step title="第一步">
						<template #icon>
							<SvgIcon name="iconfont icon-0_round_solid" :size="20" />
						</template>
					</el-step>
					<el-step title="第二步">
						<template #icon>
							<SvgIcon name="iconfont icon-2_round_solid" :size="20" />
						</template>
					</el-step>
					<el-step title="第三步">
						<template #icon>
							<SvgIcon name="iconfont icon-3_round_solid" :size="20" />
						</template>
					</el-step>
				</el-steps>
				
				<el-form class="forget-form" ref="verifyFormRef" :model="formData" :rules="formRules" label-width="80px" v-if="stepsActive === 1">
					<el-form-item class="login-animation1" label="登录账号" prop="loginName">
						<el-input type="text" :placeholder="$t('message.mobile.placeholder1')" v-model="formData.loginName" clearable autocomplete="off">
							<template #prefix>
								<el-icon class="el-input__icon"><el-icon-phone /></el-icon>
							</template>
						</el-input>
					</el-form-item>
					<el-form-item class="login-animation2" label="验 证 码" prop="verifyCode">
						<el-row :gutter="10" class="w100">
							<el-col :span="15">
								<el-input type="text" :placeholder="$t('message.mobile.placeholder2')" v-model="formData.verifyCode" clearable autocomplete="off">
									<template #prefix>
										<el-icon class="el-input__icon"><el-icon-position /></el-icon>
									</template>
								</el-input>
							</el-col>
							<el-col :span="9">
								<el-button class="forget-content-code" :disabled="countDown > 0" @click="onSendVerifyCode">{{ verifyBtnText }}</el-button>
							</el-col>
						</el-row>
					</el-form-item>
				</el-form>
				
				<el-form class="forget-form" ref="resetFormRef" :model="formData" :rules="formRules" label-width="80px" v-if="stepsActive === 2">
					<el-row :gutter="35">
						<el-col>
							<el-form-item label="登录账号" prop="loginName">
								<el-input v-model="formData.loginName" placeholder="请输入登录账号" readonly clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col>
							<el-form-item label="登录密码" prop="password">
								<el-input type="password" v-model="formData.password" placeholder="请输入登录密码" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col>
							<el-form-item label="确认密码" prop="confirmPassword">
								<el-input type="password" v-model="formData.confirmPassword" placeholder="请输入确认密码" clearable></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
				
				<el-result icon="success" title="密码重置成功" subTitle="" v-if="stepsActive === 3"></el-result>
				
				<center>
					<el-button @click="onVerifyFormSubmit" v-if="stepsActive === 1" size="default" class="mt15" type="primary">
						<SvgIcon name="iconfont icon-step" />下一步
					</el-button>
					<el-button @click="onResetFormSubmit" v-if="stepsActive === 2" size="default" class="mt15" type="primary">
						<SvgIcon name="iconfont icon-step" />重 置
					</el-button>
					<el-button @click="onSubmit" v-if="stepsActive === 3" size="default" class="mt15" type="primary">
						<SvgIcon name="iconfont icon-step" />完 成
					</el-button>
				</center>
			</el-card>
		</div>
	</div>
</template>

<script lang="ts">
import { ref, toRefs, reactive, defineComponent } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { Local } from '/@/utils/storage';
import { SM } from '/@/utils/sm';
import { verifyPassword } from '/@/utils/toolsValidate';
import { kaptchaSend, forgetPasswordVerify, forgetPasswordReset } from '/@/api/login/index';
export default defineComponent({
	name: 'pagesSteps',
	setup() {
		const router = useRouter();
		const verifyFormRef = ref();
		const resetFormRef = ref();
		const validPassword = (rule, value, callback) => {
			if(!value){
				return callback(new Error('登录密码不能为空'));
			}
			if(!verifyPassword(value)){
				return callback(new Error('只允许字母数字和 !@#$%^&.*_ 组成6~16个字符'));
			}
			callback();
		}
		const validConfirmPassword = (rule, value, callback) => {
			if(!value){
				return callback(new Error('确认密码不能为空'));
			}
			if(state.formData.password != value){
				return callback(new Error('确认密码和登录密码不一致'));
			}
			callback();
		}
		const publicKey = Local.get('publicKey');
		
		const state = reactive({
			stepsActive: 1,
			countDown: 0,
			verifyBtnText: '获取验证码',
			formData: {
				loginName: '',
				password: '',
				confirmPassword: '',
				verifyKey: '',
				verifyCode: '',
			},
			formRules: {
				loginName: {required: true, message: '登录账号不能为空', trigger: 'blur' },
				password: { required: false, validator: validPassword, trigger: 'blur' },
				confirmPassword: { required: false, validator: validConfirmPassword, trigger: 'blur' },
				verifyCode: { required: false, message: '验证码不能为空', trigger: 'blur' },
			}
		});
		// 获取验证码
		const onSendVerifyCode = () => {
			verifyFormRef.value.validate(valid => {
				if(valid){
					let loginName = SM.sm2Encrypt(state.formData.loginName, publicKey);
					kaptchaSend({'loginName': loginName}).then(res => {
						if(res.code == 0){
							ElMessage.success('验证码发送成功');
							state.formRules.verifyCode.required = true;
							state.countDown = 60;
							const t = setInterval(() => {
								state.countDown--;
								state.verifyBtnText = `重新发送（${state.countDown}）`;
							}, 1000);
							setTimeout(() => {
								clearInterval(t);
								state.countDown = 0;
								state.verifyBtnText = '获取验证码';
							}, 61 * 1000);
						}
					})
				}
			})
		}
		// 下一步点击
		const onVerifyFormSubmit = () => {
			verifyFormRef.value.validate(valid => {
				if(valid){
					let loginName = SM.sm2Encrypt(state.formData.loginName, publicKey);
					forgetPasswordVerify({
						'loginName': loginName,
						'verifyCode': state.formData.verifyCode,
					}).then(res => {
						if(res.code == 0){
							state.formData.verifyKey = res.data;
							state.stepsActive = 2;
							state.formRules.password.required = true;
							state.formRules.confirmPassword.required = true;
							state.formRules.verifyCode.required = false;
						}
					})
				}
			})
		}
		// 下一步点击
		const onResetFormSubmit = () => {
			resetFormRef.value.validate(valid => {
				if(valid){
					let loginName = SM.sm2Encrypt(state.formData.loginName, publicKey);
					let password = SM.sm2Encrypt(state.formData.password, publicKey);
			
					let params = {
						loginName: loginName,
						password: password,
						verifyKey: state.formData.verifyKey
					}
					forgetPasswordReset(params).then((res) => {
						if(res.code === 0){
							state.stepsActive = 3;
						}
					});
				}
			});
		}
		// 完成
		const onSubmit = () => {
			router.push({
				path: 'login'
			});
		}
		
		return {
			verifyFormRef,
			resetFormRef,
			onSendVerifyCode,
			onVerifyFormSubmit,
			onResetFormSubmit,
			onSubmit,
			...toRefs(state),
		};
	},
});
</script>
<style scoped lang="scss">
.forget-container {
	width: 100%;
	height: 100%;
	position: relative;
	background: url('../images/login/bg.png') no-repeat;
	background-size: 100% 100%;
	.forget-content {
		width: 50%;
		height: 480px;
		padding: 20px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) translate3d(0, 0, 0);
		.forget-title {
			width: 100%;
			color: var(--el-text-color-primary);
			font-weight: 500;
			font-size: 22px;
			text-align: center;
			letter-spacing: 4px;
			margin: 15px 0 30px;
			white-space: nowrap;
			z-index: 5;
			position: relative;
			transition: all 0.3s ease;
		}
	}
	@for $i from 1 through 4 {
		.login-animation#{$i} {
			opacity: 0;
			animation-name: error-num;
			animation-duration: 0.5s;
			animation-fill-mode: forwards;
			animation-delay: calc($i/10) + s;
		}
	}
	.forget-content-code {
		width: 100%;
		padding: 0;
		display: flex;
	}
	.forget-form {
		margin: 20px auto;
		width: 100%;
		max-width: 500px;
	}
}
</style>